import { useSelector, useDispatch } from "react-redux"
import { increment, decrement, addToNum } from '../store/modules/counterStore'
import { useEffect } from "react"
import { fetchChannlList } from '../store/modules/channelStore'
export default function StoreData() {
    // useSelector 获取store中的数据
    const { count } = useSelector(state => state.counter)
    const { channelList } = useSelector(state => state.channel)
    // useDispatch 获取dispatch方法 存储数据到仓库
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(fetchChannlList())
    }, [dispatch])
    return (
        <div>
            <button onClick={() => dispatch(decrement())}>增</button>
            {count}
            <button onClick={() => dispatch(increment())}>减</button>
            <button onClick={() => dispatch(addToNum(10))}>10</button>
            <button onClick={() => dispatch(addToNum(20))}>20</button>
            <ul>
                {channelList.map(item => <li key={item.id}>{item.name}</li>)}
            </ul>
        </div>
    )
}
